<template>
  <div class="examine-home-container page-common-layout">
    <div class="examine-header-container">
      <div class="left-select">
        <template v-if="!isView">
          <a-select
            allowClear
            showSearch
            :filter-option="filterOption"
            :loading="gradeLoading"
            placeholder="请选择评级"
            v-model="grade"
            @change="changeGrade($event)"
          >
            <a-select-option
              :value="item.dicItemCode"
              v-for="item in gradeSoucre"
              :key="item.uuid"
            >
              {{ item.dicItemName }}
            </a-select-option>
          </a-select>
          <a-tree-select
            v-model="tenantCode"
            show-search
            treeNodeFilterProp="title"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="请选择"
            searchPlaceholder="请输入"
            tree-default-expand-all
            :replaceFields="{
              children: 'child',
              title: 'orgName',
              key: 'id',
              value: 'orgCode',
            }"
            :tree-data="treeData"
            @change="tenantChange"
          >
          </a-tree-select>
        </template>
        <a-select
          v-else
          showSearch
          :filter-option="filterOption"
          v-model="tenantCode"
          :loading="projectLoading"
          placeholder="请选择项目"
          @change="changeProject($event)"
        >
          <a-select-option
            :value="item.proCode"
            v-for="item in projectSoucre"
            :key="item.uuid"
          >
            {{ item.proName }}
          </a-select-option>
        </a-select>
      </div>
      <div class="right-statistics">
        <div
          class="type-button"
          :class="dataType == 'statistical' && 'active-type'"
          @click="_checkDataType('statistical')"
        >
          数据统计
        </div>
        <div
          class="type-button"
          :class="dataType == 'report' && 'active-type'"
          @click="_checkDataType('report')"
        >
          数据明细
        </div>
      </div>
    </div>
    <div class="examine-body-container">
      <components
        ref="examine"
        v-if="componentVisible"
        :is="componentKey"
        :treeItem="treeItem"
        :dataType="dataType"
        :visible="componentVisible"
        @handelModal="handelModal"
        :soucre="viewSoucre"
      ></components>
    </div>
  </div>
</template>

<script>
//企业
import enterpriseStatistics from "./components/enterpriseStatistics";
//项目
import projectStatistics from "./components/projectStatistics";
//数据明细
import dataList from "./components/dataList";
//项目级查看页面
import viewModal from "./components/viewModal";
import { getPZGCProTreeList, getPZGCProList } from "@/api/qualityEngineering";
import { getDicItemByCode } from "@/api/common";
export default {
  components: {
    enterpriseStatistics,
    projectStatistics,
    dataList,
    viewModal,
  },
  data() {
    return {
      // statistical 统计  report 报表
      dataType: "statistical",
      // 组件页面
      componentKey: "projectStatistics",
      componentVisible: false,
      //项目树型数据
      tenantCode: undefined,
      treeData: [],
      treeItem: {},
      //查看
      viewSoucre: {},
      isView: false,
      //项目下拉框
      projectSoucre: [],
      projectLoading: false,
      //评级
      gradeSoucre: [],
      gradeLoading: false,
      grade: undefined,
    };
  },
  mounted() {
    this.getGradeList();
    this.getProjectTreeData();
  },
  methods: {
    changeGrade() {
      this.getProjectTreeData().then((res) => {
        this.handleActive();
      });
    },
    //查询评级
    getGradeList() {
      this.gradeLoading = true;
      return new Promise((resolve, reject) => {
        getDicItemByCode({ code: "pzgcGrade" })
          .then((res) => {
            let { data } = res;
            this.gradeSoucre = data || [];
            resolve();
          })
          .catch((_) => {
            this.gradeSoucre = [];
            reject();
          })
          .finally((_) => {
            this.gradeLoading = false;
          });
      });
    },

    tenantChange(value, label, extra) {
      this.treeItem = extra.triggerNode.dataRef;
      this.handleActive();
    },

    _checkDataType(type = "statistical") {
      this.dataType = type;
      this.handleActive();
    },

    handleActive() {
      this.isView = false;
      let { isProject = false } = this.treeItem;
      this.componentVisible = false;
      if (!isProject) {
        //企业级
        switch (this.dataType) {
          case "statistical":
            setTimeout((_) => {
              this.componentKey = "enterpriseStatistics";
              this.componentVisible = true;
            }, 300);
            break;
          case "report":
            setTimeout((_) => {
              this.componentKey = "dataList";
              this.componentVisible = true;
            }, 300);
            break;
          default:
            break;
        }
      } else {
        //项目级
        switch (this.dataType) {
          case "statistical":
            setTimeout((_) => {
              this.componentKey = "projectStatistics";
              this.componentVisible = true;
            }, 300);
            break;
          case "report":
            setTimeout((_) => {
              this.componentKey = "dataList";
              this.componentVisible = true;
            }, 300);

            break;
          default:
            break;
        }
      }
    },
    //选择 重新加载页面
    changeProject(e) {
      this.componentVisible = false;
      setTimeout(() => {
        this.componentVisible = true;
      }, 300);
    },

    handelModal(ev) {
      this.isView = true;
      this.componentVisible = false;
      let { tenantCode } = this;
      this.viewSoucre = {
        tenantCode,
        ...ev,
      };
      this.getProjectData();
      setTimeout((_) => {
        this.componentKey = "viewModal";
        this.componentVisible = true;
      }, 300);
    },

    //查询项目列表-树形
    getProjectTreeData() {
      let { grade = "" } = this;
      return new Promise((resolve, reject) => {
        getPZGCProTreeList({ grade })
          .then((res) => {
            this.treeData = res?.data ?? [];
            this.treeItem = this.treeData?.[0] ?? {};
            this.tenantCode = this.treeData?.[0]?.orgCode ?? undefined;
            resolve();
          })
          .catch((_) => {
            this.treeItem = {};
            this.tenantCode = undefined;
            this.treeData = [];
            reject();
          })
          .finally((_) => {
            this.componentVisible = true;
          });
      });
    },

    //查询项目列表-下拉框
    getProjectData() {
      this.projectLoading = true;
      return new Promise((resolve, reject) => {
        getPZGCProList({ type: 1 })
          .then((res) => {
            this.projectSoucre = res?.data ?? [];
            resolve();
          })
          .catch((_) => {
            this.projectSoucre = [];
            reject();
          })
          .finally((_) => {
            this.projectLoading = false;
          });
      });
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="less" scoped>
.examine-home-container {
  display: flex;
  flex-direction: column;
  .examine-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: flex-start;
    background-color: @base-bg-color;
    padding: 10px 20px;
    height: 56px;
    .left-select {
      /deep/.ant-select {
        width: 400px;
        font-size: 18px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: bold;
        color: @title-color;
        .ant-select-selection {
          border: 0;
          box-shadow: none;
        }
        .ant-select-arrow-icon {
          color: @title-color;
        }
      }
    }
    .right-statistics {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      color: #999999;
      .type-button {
        margin-right: 30px;
        position: relative;
        cursor: pointer;
        &:last-of-type {
          margin-right: 0;
        }
        &.active-type {
          transition: 0.5s;
          &::before {
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            content: "";
            width: 20px;
            height: 2px;
            background: #1677ff;
            border-radius: 2px 0px 2px 0px;
          }
        }
      }
    }
  }
  .examine-body-container {
    flex: 1;
    overflow: hidden;
  }
}
</style>
